<template>
    <div class="login_page">
        <div class="login_from">
                <p  @click="login(0)">用户1</p>
                <p  @click="login(1)">用户2</p>
                <p  @click="login(2)">用户3</p>
                <p  @click="login(3)">用户4</p>
            <div class="login_btn">登  录</div>
        </div>
    </div>
</template>
<script>
import {_testLogin} from '../api'
import Message from '../components/message'
export default {
    name: 'login',
    data () {
        return {
            users: [
              {userId: 10, token: 'eyJhbGciOiJIUzUxMiJ9.eyJvcGVuaWQiOiIxNTcwODQ0NDI1NDk5IiwiaGFzaCI6IjltbDdlaXNjNnJmcHR0OHF1cXRvIiwidGltZXN0YW1wIjoxNTcwODQ0NDI2OTM3fQ.0aCG5s40-WvpagPYqCrxwfZo-xmBekkMOZJg3aHyJ4-7XRQj8sMzvtAs13VZwjoy1ioz50uvVaJzpGqywpUjAQ'},
              {userId: 11, token: 'eyJhbGciOiJIUzUxMiJ9.eyJvcGVuaWQiOiIxNTcwODQ0NDk1NzA0IiwiaGFzaCI6IjJpbnZ0ZWJvb242OGc5Nzd6MHAzIiwidGltZXN0YW1wIjoxNTcwODQ0NDk1NzU1fQ.6rj6zdUf91c1zGGA2MVdmPV7_u0xq1xbe28Ra0HEQCLbc9gc9amdt4D4Tec1E2N9mQ_jiZMxnBEPhnIjLAKUSQ'},
              {userId: 12, token: 'eyJhbGciOiJIUzUxMiJ9.eyJvcGVuaWQiOiIxNTcwODQ0NTEyODYwIiwiaGFzaCI6ImtkMzdhMGJ2M2pmc2Fra2p1Yzh6IiwidGltZXN0YW1wIjoxNTcwODQ0NTEyODgxfQ.JVSUX0BYmqW5WyoCjfn1NhQqdmb210R-N4I5yBqO56ogqNtQLQw70tPnhn5cEdYtK1S1U0jNNA9Q5eTxDDNvkA'},
              {userId: 13, token: 'eyJhbGciOiJIUzUxMiJ9.eyJvcGVuaWQiOiIxNTcwODQ0NTI2NzEyIiwiaGFzaCI6IjI5YnF3MDd5ODZ2d3dlOGs3eXdvIiwidGltZXN0YW1wIjoxNTcwODQ0NTI2NzM1fQ.XH96AURCw2favTtln1cnvfa5vQMrFaXfNAX_2u-S9emij4Gwf5SNZwq7EG8dP28sPcHL9y7N5lf2THlb8m85yg'},
            ]
        }
    },
    methods: {
      // 登陆
      login (key) {
        localStorage.setItem("userId", this.users[key].userId)
        localStorage.setItem("token", this.users[key].token)
        this.$router.push({name: "home"})
      }
    }
}
</script>
<style lang="less" scoped>
 .login_page {
    width: 100%;
    height: 100%;
    background-image: url('../assets/bg.jpg');
    background-size:cover;
    .login_from {
      width: 80%;
      height: 400px;
      border: 1px solid #5a825d;
      border-radius: 12px;
      position: relative;
      top: calc(~"50% - 200px");
      left: 10%;
      background-color: rgba(200, 200, 200, .2);
      text-align: center;
      box-sizing: border-box;
      padding: 20px 10px;
      p {
        margin-bottom: 20px;
      }
      .login_btn {
        background-color: #ff5c00;
        font-size: 20px;
        display: inline-block;
        padding: 8px 26px 10px;
        color: #fff;
        line-height: 1;
        text-decoration: none;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
        text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        border-bottom: 1px solid rgba(0,0,0,0.25);
        position: relative;
        overflow: visible;
        width: auto;
      }
    }
  }
</style>


